<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .tc {
            text-align: center;
        }

        .mt5 {
            margin-top: 15px;
        }


        .good_title {
            height: 20px;
            overflow: hidden;
        }

        .googs_list {
            width: 80%;
            margin: 50px auto 0;
            height: 300px;
        }


        .googs_list ul li {
            width: 20%;
            float: left;
            box-sizing: border-box;
            height: 300px;
            border: 1px solid #999;
        }

        .googs_list ul li:hover {
            box-shadow: 0px 0px 3px #000;
        }

        .googs_list ul li img {
            width: 150px;
            height: 150px;
        }


        table {
            width: 80%;
            margin: 100px auto 150px;
            border-collapse: collapse;
            text-align: center;
        }

        tr,
        th,
        td {
            border: 1px solid #999;
            padding: 5px;
        }

        tr,
        th {
            height: 40px;
        }

        table img {
            width: 100px;
            height: 100px;
        }

        .count {
            width: 60px;
            text-align: center;
            vertical-align: bottom;
            height: 26px;
            line-height: 26px;
        }

        .btn {
            width: 40px;
            border: none;
            cursor: pointer;
            outline: none;
            font-size: 20px;
            height: 26px;
            line-height: 26px;
        }
    </style>

</head>

<body>


    <div class="googs_list tc">
        <div class="tc">
            <br>
            <h2>商品列表展示</h2>
            <br>
        </div>
        <ul class="list_ul">

        </ul>
    </div>

    <table>
        <thead>
            <tr>
                <th>全选</th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <td>
                    <label>
                        <input type="checkbox" name="check" class="quanxuan" />
                        全选按钮
                    </label>
                </td>
                <td>
                    <button type="button" id="delChecked">
                        删除选中商品
                    </button>
                </td>
                <td colspan="4"></td>
                <td>
                    总价：<br>
                    <div id="sum">

                    </div>
                </td>
            </tr>
        </tfoot>
    </table>

    <!-- 引入外部数据 -->
    <script src="./getData.js" type="text/javascript"></script>

    <script>
        //存放商品列表的数组
        var arr = [];

        //存放购物车的数组
        var cartArr = [];

        //页面加载完成后执行
        window.onload = function () {
            //渲染商品列表的数据
            showGoodsList(getLocalGoodsListData());
            //渲染购物车数据
            render(getLocalCarData());
        }

        function showGoodsList(arr) {
            //渲染商品列表
            var list_ul = document.querySelector(".list_ul");
            list_ul.innerHTML = "";
            //通过for循环和dom操作，将每个li都显示到列
            for (var i = 0; i < arr.length; i++) {
                list_ul.innerHTML += `
                                        <li data-id="${arr[i].goodsid}">
                                            <img src="${arr[i].image}" >
                                            <div class="good_title mt5">
                                                ${arr[i].name}
                                            </div>
                                            <div class="price mt5">
                                                ${arr[i].price}元
                                            </div>
                                            <button type="button" class="btn_add mt5" onclick='addCart("${arr[i].goodsid}","${arr[i].image}","${arr[i].name}","${arr[i].price}")'>
                                                加入购物车
                                            </button>
                                        </li>
                                    `;
            }
        }

        function addCart(goodsId, img, goodName, price) {
            //默认点击添加购物车，默认是+1
            var count = 1;
            //商品的小计，价格*数量
            var xiaoji = price / 1 * count;
            //所有需要的信息，存放到对象里
            var obj = {
                id: goodsId,
                src: img,
                tittle: goodsName,
                price: price,
                count: count,
                xiaoji: xiaoji.toFixed(2),
                time: new Date().tolocaleTimeString()
            }
            addData(obj);
        }

        //把数据添加到购物车
        function addData(obj) {
            cartArr = getLocalCartData();
            var result = cartArr.some(function (item, index) {
                return item.id === obj.id
            })
            if (result) {
                jia(obj.id);
                return;
            }
            //尾部添加
            cartArr.push(obj);
            localStorage.cartArr = JSON.stringify(cartArr);
            render(cartArr);
        }

        //渲染购物车列表
        function render(cartArr) {
            var tbody = document.querySelector('tbody');
            tbody.innerHTML = "";
            var str = "";
            var sum = 0;
            for (var i = 0; i < cartArr.length; i++) {
                str += `
                
                    <tr>
                                    <td>
                                        <input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${cartArr[i].id}"/>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="${cartArr[i].src}" >
                                            <br>
                                            <span>${cartArr[i].title}</span>
                                        </p>
                                    </td>
                                    <td>
                                        <button type="button" class="btn" onclick="jian(${cartArr[i].id})">-</button>
                                        <input disabled type="number" name="" id="" value="${cartArr[i].count}" class="count"/>
                                        <button type="button" class="btn" onclick="jia(${cartArr[i].id})">+</button>
                                    </td>
                                    <td>
                                        <span>${cartArr[i].price}元</span>
                                    </td>
                                    <td>
                                        ${cartArr[i].xiaoji}
                                    </td>
                                    <td>
                                        <button type="button" onclick="del(${cartArr[i].id})">删除</button>
                                    </td>
                                    <td>
                                        ${cartArr[i].time}
                                    </td>
                                    
                                </tr>
            
            `
                sum = sum / 1 + cartArr[i].xiaoji / 1
            }
            tbody.innerHTML = str;
            document.getElementById("sum").innerHTML = sum;
        }

        function getLocalCartData() {
            //判断购物车是否为空
            cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
            return cartArr;
        }


        function getLocalGoodsListData() {
            arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
            return arr;
        }

        function jian(id) {
            console.log("id:", id);
            //本地获取数据赋值给到cartArr
            cartArr = getLocalCartData();
            cartArr.forEach(function (item, index) {
                if (item.id == id) {
                    if (item.count > 1) {
                        item.count--;
                        item.xiaoji = (item.count * item.price).toFixed(2);
                    }
                }
            })
            localStorage.cartArr = JSON.stringify(cartArr);
            render(cartArr);
        }

        function jia(id) {
            console.log(id);
            cartArr = getLocalCartData();
            cartArr.forEach(function (item, index) {
                if (item.id == id) {
                    item.count++;
                    item.xiaoji = (item.count * item.price).toFixed(2);
                }
            });
            //本地数据的更新
            localStorage.cartArr = JSON.stringify(cartArr);
            //本地数据发生变化后，页面也要重新渲染
            render(cartArr);
        }

        function del(id) {

            cartArr = getLocalCartData();

            cartArr = cartArr.filter(function (item, index) {
                return item.id != id
            })
            localStorage.cartArr = JSON.stringify(cartArr);
            render(getLocalCartData());
        }
    </script>

</body>

</html>